<template>
  <div class="top">
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">浏览数</p>
          <div class="bottom">
            <img src="../../../../assets/kehu-imgs/icon06.png" alt="" />
            <div class="bottom-b">
              <span>
                <span class="num">2.2</span>
                万
              </span>
              <p>较昨日+1.2%</p>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">注册人数</p>
          <div class="bottom">
            <img src="../../../../assets/kehu-imgs/icon07.png" alt="" />
            <div class="bottom-b">
              <span>
                <span class="num">1.2</span>
                万
              </span>
              <p>较昨日+1.2%</p>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">下单人数</p>
          <div class="bottom">
            <img src="../../../../assets/kehu-imgs/icon08.png" alt="" />
            <div class="bottom-b">
              <span>
                <span class="num">1.5</span>
                万
              </span>
              <p>较昨日+1.2%</p>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">关注人数</p>
          <div class="bottom">
            <img src="../../../../assets/kehu-imgs/icon09.png" alt="" />
            <div class="bottom-b">
              <span>
                <span class="num">1.4</span>
                万
              </span>
              <p>较昨日+1.2%</p>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">评论人数</p>
          <div class="bottom">
            <img src="../../../../assets/kehu-imgs/icon10.png" alt="" />
            <div class="bottom-b">
              <span>
                <span class="num">1.6</span>
                万
              </span>
              <p>较昨日+1.2%</p>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">点赞人数</p>
          <div class="bottom">
            <img src="../../../../assets/kehu-imgs/icon11.png" alt="" />
            <div class="bottom-b">
              <span>
                <span class="num">1.1</span>
                万
              </span>
              <p>较昨日+1.2%</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="bottom1">
    <div class="top1">
      <h5 class="title">成交排行</h5>
      <div class="Da">
        <span>地区</span>
        &emsp;
        <el-dropdown
          trigger="click"
          placement="bottom-end"
          @command="handleCommand"
          v-for="item in cityList"
          :key="item.id"
        >
          <div class="henK">
            <span class="el-dropdown-link">
              <p id="diqu"></p>
              <span id="sheng">{{ item.title }}</span>
              <span class="iconfont icon-xiala"></span>
            </span>
          </div>
          <template #dropdown>
            <el-dropdown-menu v-for="value in item.children" :key="value.id">
              <el-dropdown-item :command="value.name">
                {{ value.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span>时间</span>
        <div class="time">
          <span class="iconfont icon-shijian"></span>
          &emsp; &emsp; &emsp;
          <div class="time-1">开始日期 &emsp;至&emsp;结束日期</div>
        </div>
        &emsp; &emsp;
        <button class="cz">重置</button>
        &emsp;
        <button class="quer">确认</button>
        <!--  -->
      </div>
    </div>
    <div class="bottom2">
      <div class="title">
        <span class="num">排名</span>
        <span class="user">用户</span>
        <span class="city">省份</span>
        <span class="sq">市区</span>
        <span class="dz">地址</span>
        <span class="timer">下单时间</span>
        <span class="siz">操作</span>
      </div>

      <!-- 准备渲染数据 -->
      <div v-for="item in listAdd" :key="item.goodsId">
        <div
          class="title2"
          :class="Number(item.goodsId) % 2 !== 0 ? 'active1' : 'active2'"
          @click="handelClick(item.goodsId)"
        >
          <!-- id -->
          <span class="num">{{ item.goodsId }}</span>
          <!-- 名字 -->
          <span class="user">{{ item.name }}</span>
          <!-- 地区 -->
          <span class="city">{{ item.ccity }}</span>
          <span class="sq">{{ item.country }}</span>
          <span class="timer">{{ item.countrysx }}</span>
          <span class="siz">{{ item.goodsSale }}</span>
          <span>查看</span>
          <span>编辑</span>
        </div>
      </div>
      <div class="pages">
        <el-pagination
          small
          background
          :total="50"
          class="mt-4"
          @current-change="fn"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue'
import ShuJ from '@/mock/Data'
export default {
  setup() {
    const cityList = ref([
      {
        id: 1,
        title: '省',
        children: [
          {
            id: '杭州',
            name: '杭州',
          },
          {
            id: '上海',
            name: '上海',
          },
          {
            id: '河南',
            name: '河南',
          },
          {
            id: '北京',
            name: '北京',
          },
        ],
      },
      {
        id: 2,
        title: '市',
        children: [
          {
            id: '信阳',
            name: '信阳',
          },
          {
            id: '郑州',
            name: '郑州',
          },
          {
            id: '商丘',
            name: '商丘',
          },
          {
            id: '周口',
            name: '周口',
          },
        ],
      },
      {
        id: 3,
        title: '区',
        children: [
          {
            id: '北区',
            name: '北区',
          },
          {
            id: '南区',
            name: '南区',
          },
          {
            id: '西区',
            name: '西区',
          },
          {
            id: '东区',
            name: '东区',
          },
        ],
      },
    ])
    const listAdd = ref([])
    const goodsId = ref('')

    const page = ref(1)
    const size = ref(8)

    // 点击改变框的内容
    const handleCommand = (command: any) => {
      let Dz = document.getElementById('diqu')
      let S = document.getElementById('sheng')
      if (Dz && S) {
        Dz.innerHTML = command
        S.innerHTML = ''
      }
    }

    // 点击分页
    const fn = async (index: number) => {
      page.value = index
      const list: any = await ShuJ.getData({
        page: page.value,
        size: size.value,
      })
      listAdd.value = list.result
    }

    // 请求数据
    onMounted(async () => {
      const list: any = await ShuJ.getData({
        page: page.value,
        size: size.value,
      })

      listAdd.value = list.result
    })

    return {
      handleCommand,
      fn,
      cityList,
      listAdd,
      goodsId,
      page,
      size,
    }
  },
}
</script>

<style lang="less" scoped>
// 分页定位
.pages {
  margin-top: 5px;
  float: right;
}

// 隔行变色
.active1 {
  background-color: #f5f5f5;
}

.active2 {
  background-color: #ffffff;
}

// 下面数据渲染标题
.bottom2 .title {
  text-indent: 15px;
  margin-top: 15px;
  width: 100%;
  height: 50px;
  display: inline-flex;
  align-items: center;
  font-family: SourceHanSansSC-Regular;
  color: #fff;
  background-color: #341a76;
  .num {
    width: 150px;
  }
  .user {
    width: 150px;
  }
  .city {
    width: 150px;
  }
  .sq {
    width: 150px;
  }
  .dz {
    width: 250px;
  }
  .timer {
    width: 150px;
  }
}

// 下面数据渲染
.bottom2 .title2 {
  text-indent: 15px;
  margin-top: 5px;
  width: 100%;
  height: 25px;
  display: inline-flex;
  align-items: center;
  font-family: SourceHanSansSC-Regular;
  color: black;

  .num {
    width: 150px;
  }
  .user {
    width: 150px;
  }
  .city {
    width: 150px;
    display: inline-block;
  }
  .sq {
    width: 150px;
  }
  .dz {
    width: 150px;
  }
  .timer {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 250px;
  }
  .siz {
    width: 150px;
  }
}
.top {
  margin-bottom: 10px;
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    box-sizing: border-box;
    padding: 20px 15px;
    width: 180px;
    height: 160px;
    background-color: #f5f5f5;
  }
  .title {
    width: 100%;
    height: 40px;
    font-size: 16px;
    color: #666666;
    font-family: MicrosoftYaHei;
  }

  .bottom {
    display: flex;
    align-items: center;
  }
  .bottom > img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .num {
    font-family: Dosis-Medium;
    font-weight: bold;
    font-size: 40px;
    color: #333333;
  }
  .bottom-b > p {
    white-space: nowrap;
  }
}
.Da {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
}
.bottom1 {
  width: 100%;
  height: calc(100vh - 300px);
  overflow-y: auto;
  padding: 10px 15px;
  box-sizing: border-box;
  background-color: #f5f5f5;
  .title {
    font-size: 16px;
    font-weight: MicrosoftYaHei;
    margin-bottom: 10px;
  }
}

.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-dropdown {
  margin-right: 30px;
  background-color: #e7e7e7;
}
.henK {
  display: flex;
  align-items: center;
}
// 省份框
.el-dropdown-link {
  display: inline-flex;
  align-items: center;
  width: 150px;
  font-size: 12px;
  border-radius: 4px;
  height: 20px;
  border: 1px solid black;
  text-indent: 10px;
}
.time {
  display: inline-flex;
  width: 250px;
  font-size: 12px;
  height: 20px;
  border: 1px solid black;
  border-radius: 4px;
  margin-left: 20px;
  background-color: #e7e7e7;
  align-items: center;
}
.time-1 {
  line-height: 20px;
}
#diqu {
  display: inline-block;
  width: 130px;
}
/deep/.el-dropdown-menu__item {
  width: 160px;
}

.cz {
  border-radius: 5px;
  width: 80px;
  height: 30px;
  background-color: #848492;
  border: 0;
}
.quer {
  border-radius: 5px;
  width: 80px;
  height: 30px;
  background-color: #5f4e72;
  border: 0;
}
</style>
